<template>
  <div class="container">
        <div class="title">
            <dv-border-box-10 style="color: aliceblue;">
            中国各城市经济分析与可视化
            </dv-border-box-10>
        </div>
        <dv-border-box-8 :color="['pink','gold']" class="list">
            <ul>
                <li>
                    <router-link to="/home" class="link" style="color:blanchedalmond;">首页</router-link>
                </li>
                <li>
                    <router-link to="/year_value_ral" class="link" style="color: aquamarine;">生产总值与年份的关系</router-link>
                </li>
                <li>
                    <router-link to="/houseprice_tendency"class="link" style="color: lightpink;">各城市房价变化趋势</router-link>
                </li>
                <li>
                    <router-link to="/peoplenum_value_ral"class="link" style="color: darkturquoise;">居民数量与生产总值的关系</router-link>
                </li>
                <li>
                    <router-link to="/city_bdinvestment_rank"class="link" style="color: coral;">各城市房地产投资金额</router-link>
                </li>
                <li>
                    <router-link to="/avgwage_depbalance_ral"class="link" style="color: goldenrod;">居民平均工资与存款的关系</router-link>
                </li>
                <li>
                  <router-link to="/City_Value_Rank"class="link" style="color: slateblue;">全国各城市生产总值排名</router-link>
              </li>
              <li>
                  <router-link to="/income_expenses_ral"class="link" style="color: thistle;">地方支出与收入的关系</router-link>
              </li>
        </ul>
        </dv-border-box-8>
        <div class="body" ref="mapchart">
            
        </div>
  </div>
</template>
    
<script setup>
    import * as echarts from 'echarts'
    import mapdata from '../store/china.json'
    import {ref, onMounted,} from 'vue'
    let mapchart = ref();
    function initMap(){
        let mymapchart = echarts.init(mapchart.value,"light",{
            width:1600,
            height:800,
        })
        echarts.registerMap("chinamap",mapdata)
        let option = {
            title:{
            text:'中国主要城市GDP',
            left:'center',
            top:'50px',
            textStyle:{
                color:'#fff',
                fontWeight:'bold',
                fontSize:30
            }
        },
        tooltip:{
                trigger:'item',
                formatter:function(params){
                    var cityName = params.name; // 城市名称
                    var cityInfo = {
                            '北京市': { gdp: '290328' },
                            '上海市': { gdp: '316049' },
                            '广州市': { gdp: '204596' },
                            '杭州市': { gdp: '122216' },
                            '成都市': { gdp: '134145' },
                            '武汉市': { gdp: '127756' },
                            '深圳市': { gdp: '212421' },
                            '重庆市': { gdp: '191698' },
                            '南京市': { gdp: '113998' },
                            '郑州市': { gdp: '89512' },
                                // 你可以根据实际需求扩展
                        };
                    var info  = cityInfo[cityName] || {gdp:'N/A'};
                    return cityName + '<br>' + 'GDP:' + info.gdp
                }
        },
            geo:{
                type:"map",
                map:"chinamap",
                roam:true,
                zoom:1.2,
                label:{
                        show:true,
                        fontSize:15,
                        color:'white'
                     },
                itemStyle:{
                    areaColor:'rgba(255,255,255,0.2)',
                    borderColor:'gold',
                    borderWidth:1,
                    borderType: 'dashed',
                    emphasis:{
                        areaColor:'#FFE4E1'

                    }
                    
                },
                
            },
            series:[
                {
                  
                    data:[
                        {
                            name:"北京市",
                            value:[116.414249,39.909817,290328],                  
                            rippleEffect:{
                                scale:4
                            }
                        },
                        {
                            name:"上海市",
                            value:[121.480827,31.235682,316049],                     
                            rippleEffect:{
                                scale:5
                            }
                        },
                        {
                            name:"广州市",
                            value:[113.271716,23.136134,204596],
                            rippleEffect:{
                                scale:3
                            }
                        },
                        {
                            name:"杭州市",
                            value:[120.215797,30.255328,122216],
                            rippleEffect:{
                                scale:2
                            }
                        },
                        {
                            name:"成都市",
                            value:[104.073607,30.579243,134145],
                            rippleEffect:{
                                scale:2
                            }
                        },
                        {
                            name:"武汉市",
                            value:[114.311298,30.598218,127756],                     
                            rippleEffect:{
                                scale:2
                            }
                        },
                        {
                            name:"深圳市",
                            value:[114.065414,22.550592,212421],                     
                            rippleEffect:{
                                scale:4
                            }
                        },
                        {
                            name:"重庆市",
                            value:[106.5547,29.568493,191698],                     
                            rippleEffect:{
                                scale:3
                            }
                        },
                        {
                            name:"南京市",
                            value:[118.800985,32.061714,113998],                     
                            rippleEffect:{
                                scale:2
                            }
                        },
                        {
                            name:"郑州市",
                            value:[113.631129,34.75344,89512],                     
                            rippleEffect:{
                                scale:1
                            }
                        },
                    ],
                    coordinateSystem:"geo",
                    type:"effectScatter",
                   
            
                    
                }
            ],
            visualMap:[
                {
                    left:10,
                    bottom:10,
                    pieces:[
                        {
                            gte:300000,label:'300000以上'
                        },
                        {
                            gte:250000, lte:299999, label:'250000-299999'
                        },
                        {
                            gte:200000, lte:249999, label:'200000-249999'
                        },
                        {
                            gte:150000, lte:199999, label:'150000-199999'
                        },
                        {
                            gte:100000, lte:149999, label:'100000-149999'
                        },
                        {
                             lte:100000, label:'100000以下'
                        },
                    ],
                        inRange:{
                            color:[
                                '#0fffc3',
                                '#1ad9cf',
                                '#25b3db',
                                '#2f8ee7',
                                '#3a68f3',
                                '#4542ff',
                               
                            ]
                        },
                        textStyle:{
                            color:'#fff'
                        }
                },

            ]
        }
        mymapchart.setOption(option)
        
    }

        onMounted(()=>{
            initMap();
           
        })
    
</script>
    
<style scoped>
.container{
    background-image: url('../imgs/bg.gif');
    width: 100vw;
    height: 100vh;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
}
.title{
    height: 100px;
    width: 100vw;
    text-align: center;
    font-size: 50px;
}
.list{
    height: 100px;
    width: 100vw;

}
li{
    
    text-align: center;
    flex: 1;
}
ul{
    display: flex;
    justify-content: space-between;
    list-style-type: none;
}
.link{
    color: aliceblue;
    text-decoration: none;
    line-height: 100px;
    transition: background-color 0.3s;
    border-radius: 5px;
    
}
.link:hover{
    color: red;
    background-color: pink;
}
.body{
    width: 100vw;
    height: 830px;
    
}  
</style>